<template>
	<div class="alarmConfiguration zy-content">
		<!-- 工装与设备 -->
		<search :columns="searchData" @getSearch="getSearch(arguments)"></search>
		<div class="alarmConfiguration">
			<div class="list-layout mt16">
				<div class="btns clear">
					<span class="title">{{ $t('common.listInformation') }}</span>
					<Button @click="exportTemplateClick">{{ $t('common.Export') }}</Button>
					<Button @click="comModal('close')">取消备料出库</Button>
				</div>
				<!-- 表格 -->
				<div class="tableContent">
					<Table
						class="resizable-table"
						border
						@on-column-width-resize="
							(a, b, c, d) => {
								onColumnWidthResize(a, b, c, d, 'orderAdjustmentDeviceInfo');
							}
						"
						:columns="orderAdjustmentDeviceInfoList"
						ellipsis
						ref="selection"
						stripe
						:data="dataArr"
						@on-selection-change="onSelectChange"
					>
						<template slot-scope="{ row }" slot="action">
							<span class="operationBtn" @click="checkDetail(row)">详情</span>
						</template>
					</Table>
				</div>
				<!-- 分页 -->
				<div class="pageWrap mt16">
					<pageLeftTitle :total="total" :selected="delIds.length" />
					<Page
						:total="total"
						:page-size="pageSize"
						:page-size-opts="pageSizeOption"
						:current="pageNum"
						@on-change="changePageNum"
						@on-page-size-change="changePageSize"
						show-sizer
						show-total
					/>
				</div>
			</div>
		</div>
		<commonModal ref="commonModal"></commonModal>
	</div>
</template>
<script>
import search from '@/components/curd/searchList.vue';
import fileDownload from 'js-file-download';
import commonModal from '@/components/modalTypes/commonModal.vue';
import toggleTableOperation from '@/mixins/toggleTableOperation';
export default {
	name: 'productionMaterialManagement',
	components: { search, commonModal },
	mixins: [toggleTableOperation],
	data() {
		const statusList = [
			{
				label: '待备料',
				value: 0,
			},
			{
				label: '部分备料',
				value: 1,
			},
			{
				label: '全部备料',
				value: 2,
			},
			{
				label: '关闭',
				value: 3,
			},
			{
				label: '强制完工',
				value: 4,
			},
		];
		return {
			searchData: [
				{
					title: '领料任务单号',
					key: 'requisitionTaskNumber',
				},
				{
					title: '物料编码',
					key: 'materialCode',
				},
				{
					title: '生产领料状态',
					key: 'status',
					type: 'select',
					dicData: statusList,
				},
				{
					title: '工单任务号',
					key: 'workTaskNumber',
				},
				{
					title: '生产订单号',
					key: 'orderCode',
				},
				{
					title: '工序编号',
					key: 'processCode',
				},
				{
					title: '工序名称',
					key: 'processName',
				},
				{
					title: '工厂',
					key: 'workShop',
					type: 'cascader',
					dicUrl: '/basic/organization/findListByToken?level=0',
					params: {
						label: 'name',
						value: 'code',
						children: 'children',
					},
				},
			],
			//一级table配置
			columns: [
				{
					key: 'selection',
					type: 'selection',
					width: 60,
					align: 'center',
				},
				{
					// 7777777
					title: '序号',
					key: 'index',
					minWidth: 130,
					align: 'center',
					resizable: true,
					render: (h, params) => {
						return h('span', params.index + (this.pageNum - 1) * this.pageSize + 1);
					},
				},
				{
					title: '调拨单号',
					key: 'requisitionTaskNumber',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '业务类型',
					key: 'materialCode',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '物料编码',
					key: 'version',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '物料名称',
					key: 'planRequisitionQuantity',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '规格',
					key: 'status',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
					render: (h, params) => {
						return h('span', statusList.find((item) => item.value == params.row.status).label);
					},
				},
				{
					title: '型号',
					key: 'orderCode',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '出库源物料码',
					key: 'productionPlanNo',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '出库目标物料码',
					key: 'procedureCode',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '出库二维码数量',
					key: 'procedureNumberName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '仓库编码',
					key: 'factoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '仓库名称',
					key: 'factoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '库区编号',
					key: 'factoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '库区名称',
					key: 'factoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '库位编号',
					key: 'factoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '库位名称',
					key: 'factoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '生产订单号',
					key: 'factoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工单任务号',
					key: 'factoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工序名称',
					key: 'factoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工厂编号',
					key: 'factoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '工厂名称',
					key: 'factoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '备注',
					key: 'factoryName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},

				{
					title: '创建人名称',
					key: 'createName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '创建时间',
					key: 'createTime',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '更新人名称',
					key: 'updateName',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '更新时间',
					key: 'updateTime',
					minWidth: 100,
					align: 'center',
					resizable: true,
					tooltip: true,
				},
				{
					title: '操作',
					slot: 'action',
					fixed: 'right',
					minWidth: 180,
					align: 'center',
				},
			],
			loading: false,
			//三级搜索参数
			searchParams: {},

			//一级页面分页参数
			pageNum: 1,
			pageSize: 10,
			total: 0,

			dataArr: [],

			allCheck: false,

			delFaultCodeShowF: false, //是否显示删除弹窗
			pageSizeOption: [10, 20, 30, 40],
			delIds: [],
			selection: [],
			createByOptions: [],
		};
	},
	mounted() {
		// this.getTableColumnsWidth(this.columns);
		this.getTableColumnsWidth(this.columns, 'orderAdjustmentDeviceInfo');
		this.searchList();
	},
	methods: {
		reset() {
			this.searchParams = {};
			this.changeNum();
		},
		//勾选列表
		onSelectChange(selection) {
			let myArray = [];
			selection.map((item, index) => {
				myArray.push(item.id);
			});
			this.delIds = myArray;
			if (selection.length > 0) {
				this.allCheck = true;
			} else {
				this.allCheck = false;
			}
		},
		comModal(type) {
			if (this.delIds.length == 0) {
				this.$Message.warning({
					content: '请选择要操作的数据',
					duration: 6,
					closable: true,
				});
				return;
			}
			let params = {
				url: '',
				type: 'sure',
				desc: '',
				title: '',
			};
			if (type == 'close') {
				params.title = '关闭提醒';
				params.url = '';
				params.desc = '是否确认关闭';
			} else if (type == 'force') {
				params.title = '完工提醒';
				params.url = '/dms/requisitionTask/completionRequisitionTaskPlan';
				params.desc = '是否确认强制完工？';
			}
			this.$refs.commonModal.showModal({
				title: params.title,
				type: params.type,
				desc: params.desc,
				submit: () => {
					this.axios({
						method: 'post',
						url: params.url,
						data: this.delIds,
					}).then((res) => {
						if (res.code === 200) {
							this.$Message.success(res.msg);
							this.searchList();
						} else {
							this.$Message.warning({
								content: res.msg,
								duration: 6,
								closable: true,
							});
						}
					});
				},
			});
		},
		getSearch(params) {
			this.searchParams = JSON.parse(JSON.stringify(params[0]));
			const { workShop } = this.searchParams;
			if (workShop && workShop.length > 0) {
				this.searchParams.workShop = workShop.at(-1);
			} else delete this.searchParams.workShop;
			this.pageNum = 1;
			this.searchList();
		},
		//分页
		changeNum() {
			this.pageNum = 1;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},
		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
		//查询列表
		searchList() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.searchParams,
			};
			this.axios({
				url: '/dms/requisitionTask/queryRequisitionTaskPlanList',
				method: 'post',
				data: params,
			}).then((res) => {
				if (res.code === 200) {
					this.dataArr = res.data.records;
					this.total = res.data.total;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		checkDetail(row) {
			this.$router.push({
				path: '/planManage/productionMaterialManagement/detail',
				query: {
					id: row.id,
				},
			});
		},
		//导出
		exportTemplateClick() {
			let params = {
				...this.searchParams,
			};
			const filName = '生产领料管理';
			this.axios({
				method: 'post',
				url: '/dms/requisitionTask/export',
				data: params,
				responseType: 'blob',
			}).then((res) => {
				fileDownload(res, filName + '.xlsx');
			});
		},
	},
};
</script>

<style scoped lang="scss">
.ivu-input-number {
	width: -webkit-fill-available;
}

.btn-box {
	padding: 8px 5px !important;
}
</style>
